<script setup lang="ts">
import MedicineSave from '@/views/medicine/MedicineSave.vue'
import { ref, onMounted, nextTick } from 'vue'
import MedicineAPI, {MedicineData, MedicineSearchData} from "@/api/medicine";
import {ElMessage, ElMessageBox} from "element-plus";

const search = ref<Partial<MedicineSearchData>>({})
const dataList = ref<MedicineData[]>([])
const loading = ref<boolean>(false)
const current = ref<number>(1)
const size = ref<number>(20)
const totalCount = ref<number>(0)
const saveVisible = ref<boolean>(false)
const saveRef = ref()

onMounted(() => {
  findDataList()
})
const findDataList = () => {
  if (!loading.value) {
    loading.value = true
    MedicineAPI.findPage(search.value, current.value, size.value)
        .then((data) => {
          dataList.value = data.records
          totalCount.value = data.total
          loading.value = false
        })
        .catch((err) => {
          console.log(err)
          ElMessage.error('获取分页数据失败')
          loading.value = false
        })
  }
}
const handleClear = () => {
  search.value = {}
  findDataList()
}

const handleAddOrUpdate = (row?: MedicineData) => {
  saveVisible.value = true
  nextTick(() => {
    saveRef.value.init(row)
  })
}
const handleDelete = (id: string) => {
  ElMessageBox.confirm('确认要删除该数据吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true
    MedicineAPI.delete(id)
        .then(() => {
          ElMessage.success('删除成功')
          loading.value = false
          nextTick(() => {
            findDataList()
          })
        })
        .catch(() => {
          ElMessage.error('删除失败')
          loading.value = false
        })
  })
}
const handleCurrentChange = (val: number) => {
  current.value = val
  findDataList()
}
const handleSizeChange = (val: number) => {
  current.value = 1
  size.value = val
  findDataList()
}
</script>

<template>
  <div class="medicine-page">
    <div class="medicine-page_search">
      <el-form>
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.code" placeholder="药品代码" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.endcode" placeholder="药品编码" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.name" placeholder="药品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.spec" placeholder="规格" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.unit" placeholder="单位" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.prescribeUnit" placeholder="处方单位" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-input v-model="search.nactionInsurCode" placeholder="医保国家编码" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button icon="Refresh" @click="handleClear">重置</el-button>
            <el-button type="primary" icon="Search" @click="findDataList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="medicine-page_oper">
      <el-button type="primary" icon="Plus" @click="handleAddOrUpdate()">添加</el-button>
    </div>
    <el-table
        class="medicine-page_table"
        :data="dataList"
        border
        show-overflow-tooltip
    >
      <el-table-column label="代码" prop="code" min-width="50" align="center" show-overflow-tooltip/>
      <el-table-column label="编码" prop="endcode" min-width="50" align="center" show-overflow-tooltip/>
      <el-table-column label="药品名称" prop="name" min-width="150" show-overflow-tooltip/>
      <el-table-column label="规格" prop="spec" min-width="120" show-overflow-tooltip/>
      <el-table-column label="单位" prop="unit" min-width="100" align="center" show-overflow-tooltip />
      <el-table-column label="处方单位" prop="prescribeUnit" min-width="100" show-overflow-tooltip/>
      <el-table-column label="医保国家编码" prop="nactionInsurCode" min-width="100" show-overflow-tooltip/>
      <el-table-column label="数量" prop="qty" min-width="80" align="center" show-overflow-tooltip/>
      <el-table-column label="单价" prop="price" min-width="80" align="center" show-overflow-tooltip/>
      <el-table-column label="操作" fixed="right">
        <template #default="{row}">
          <el-button type="primary" link @click="handleAddOrUpdate(row)">修改</el-button>
          <el-button type="danger" link @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="medicine-page_pagination"
        v-model:current-page="current"
        v-model:page-size="size"
        :page-sizes="[10, 20, 50, 500]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <MedicineSave v-if="saveVisible" ref="saveRef" @refreshDataList="findDataList" />
  </div>
</template>

<style scoped lang="scss">
.medicine-page {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  flex-direction: column;

  &_oper {
    display: inline-flex;
    margin-bottom: 10px;
  }

  &_table {
    flex: 1;
    height: 0;
    overflow: auto;
  }

  &_pagination{
    margin-top: 10px;
  }
}
</style>